<template>
  <div>
    <tables
      ref="tables"
      searchable
      search-place="top"
      :columns="columns"
      v-model="localData"
      @on-row-edit="handleRowEdit"
      @on-row-remove="handleRowRemove"
      @on-selection-change="handleSelect"
      @searchEvent="handleSearch"
    >
      <template v-slot:table-header>
        <Button @click="handleAdd" class="search-btn" type="primary">
          <!--          v-if='isEdit'-->
          <Icon type="md-person-add" />&nbsp;&nbsp;添加
        </Button>
      </template>
    </tables>
    <Row type="flex" justify="space-between" align="middle">
      <Col class="ctrls">
        <Button @click="handleDeleteBatch()">批量删除</Button>
        <Button @click="handleSetBatch()">批量设置</Button>
        <Button @click="handleResourceCate()">资源分类</Button>
      </Col>
      <Col>
        <Page
          :total="total"
          :current="pageNum"
          :page-size="pageSize"
          :page-size-opts="pageArr"
          show-elevator
          show-sizer
          show-total
          @on-change="onPageChange"
          @on-page-size-change="onPageSizeChange"
        />
      </Col>
    </Row>
    <AddModel
      ref="addModel"
      :isShow="showModel"
      :isEdit="showEdit"
      :item="selectItem"
      @editEvent="handleItemAdd"
      @changeEvent="handleAddChangeEvent"
    ></AddModel>
    <BatchSet
      ref="batchSet"
      :isShow="showSet"
      :selectData="selection"
      @editEvent="handleItemSet"
      @changeEvent="handleSetChangeEvent"
    ></BatchSet>
  </div>
</template>

<script>
import Tables from '_c/tables'
import AddModel from './operations/add'
import BatchSet from './operations/set'
import { resourceDispatch } from '@/api/admin'

export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  components: {
    Tables,
    AddModel,
    BatchSet
  },
  data() {
    return {
      query: {},
      showModel: false,
      showEdit: false,
      showSet: false,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      keyword: null,
      pageArr: [10, 20, 30, 50, 100],
      selectItem: {},
      selection: [],
      current: 0,
      localData: []
    }
  },
  watch: {
    localData() {
      this.$emit('on-change', this.localData)
    },
    tableData(newVal, oldVal) {
      this.localData = newVal
    }
  },
  mounted() {
    this._getResource()
  },
  methods: {
    _getResource(pageNum = this.pageNum, pageSize = this.pageSize) {
      const data = {
        pageNum,
        pageSize,
        query: this.query
      }
      resourceDispatch.use('get', data).then((res) => {
        if (res.code === 200) {
          this.localData = res.data.list
          this.total = res.data.totalCount
          this.$emit('on-change', this.localData)
        }
      })
    },
    handleRowEdit(item, index) {
      this.selectItem = item
      console.log(this.selectItem)
      this.current = index
      this.showEdit = true
      this.showModel = true
      this.$nextTick(() => {
        this.$refs.addModel.init()
      })
    },
    handleResourceCate() {
      this.$router.push({ path: '/system/resource/category' })
    },
    handleRowRemove(row, index) {
      this.$Modal.confirm({
        title: '确定删除吗？',
        content: `删除${row.name}的名称，请求路径${row.path}资源？`,
        onOk: () => {
          const ids = [row.id]
          resourceDispatch.use('delete', ids).then((res) => {
            if (res.code === 200) {
              this.$Message.success('删除成功！')
              this._getResource()
            }
          })
        },
        onCancel: () => {
          this.$Message.info('取消操作！')
        }
      })
    },
    handleSelect(selection) {
      this.selection = selection
    },
    handleSearch(value) {
      console.log(value)
      this.option = value
      // this._getResource()
    },
    handleDeleteBatch() {
      // 批量进行删除
      if (this.selection.length === 0) {
        this.$Message.info('请选择需要删除的数据！')
        return
      }
      const msg = this.selection.map((o) => o.name).join(',')
      const ids = this.selection.map((o) => o.id)
      this.$Modal.confirm({
        width: 600,
        title: '确定删除吗？',
        content: `删除${msg}的资源吗？`,
        onOk: () => {
          resourceDispatch.use('delete', ids).then((res) => {
            if (res.code === 200) {
              this.$Message.success('批量删除成功！')
              this._getResource(1)
            }
          })
        },
        onCancel: () => {
          this.handleSelectAll(false)
          this.$Message.info('取消操作！')
        }
      })
    },
    handleSetBatch() {
      // 批量进行删除
      if (this.selection.length === 0) {
        this.$Message.info('请选择需要设置的数据！')
        return
      }
      this.showSet = true
    },
    handleAdd() {
      this.showModel = true
      this.showEdit = false
      this.$nextTick(() => {
        this.$refs.addModel.init()
      })
    },
    handleItemAdd(item) {
      // 每次添加模态框架触发的添加数据的事件
      // if (this.showEdit) {
      //   this.showEdit = false
      // } else {
      //   this.localData.push(item)
      // }
      this._getResource()
    },
    // 批量设置模态框
    handleItemSet(settings) {
      const msg = this.selection.map((o) => o.name).join(',')
      this.$Modal.confirm({
        width: 600,
        title: '确定设置吗？',
        content: `修改${msg}的资源吗？`,
        onOk: () => {
          console.log(settings)
          resourceDispatch.use('updateBatch', settings).then((res) => {
            if (res.code === 200) {
              this.$Message.success('批量设置成功！')
              this._getResource()
            }
          })
        },
        onCancel: () => {
          this.handleSelectAll(false)
          this.$Message.info('取消操作！')
        }
      })
    },
    handleSelectAll(status) {
      if (!status) {
        this.selection = []
      }
      this.$refs.tables.handleSelectAll(status)
    },
    handleAddChangeEvent(value) {
      this.showModel = value
    },
    handleSetChangeEvent(value) {
      this.showSet = value
    },
    onPageChange(page) {
      this.pageNum = page
      this._getResource()
    },
    onPageSizeChange(size) {
      this.pageSize = size
      this._getResource()
    }
  }
}
</script>

<style lang="scss" scoped>
.ctrls {
  margin-top: 10px;

  button {
    margin-right: 10px;
  }
}
</style>
